<template>
    <div class="box">
        <div class="header">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">
                        <van-icon name="service-o" style="font-size: 20px;" />
                    </div>
                </template>
            </van-search>
        </div>
        <div class="meddle">
            <ul style="column-count: 2;">
                <li v-for="item in list" :key="item.id" >
                    <img :src="item.image" alt="" style="width: 100%;" @click="$router.push('/detail/'+item.id)">
                    <p>{{ item.title }}</p>
                    <p style="color: red;">￥{{ item.price }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
    import request from '@/utils/request.js'
    import {ref,onMounted} from 'vue'
    const list=ref([])
    onMounted(()=>{
        request.get('/list',{
            params:{
                pagination:1, pageNum:30
            }
        }).then(res=>{
            if(res.data.code==200){
                list.value=res.data.data
            }
        })
    })
</script>